<!-- 项目策划考核 新增|编辑|查看 -->
<template>
  <base-breadcrumb style="padding-bottom: 50px;" :breadcrumb="!isAudit">
    <a-spin :spinning="loading">
      <a-card>
        <title-name title="基本信息" />
        <custom-form
          ref="form"
          :is-validate="true"
          :edit-model="''"
          :rules="rules"
          :form="form"
          :is-emit="false"
          :form-list="formOption"
        >
        </custom-form>
      </a-card>
      <a-card>
        <title-name title="策划执行书考核月度汇总" />
        <b-table
          :scroll="{ x: 7000 }"
          bordered
          :defaultLoad="false"
          ref="table"
          size="default"
          rowKey="id"
          :columns="detailColums"
          :request="loadData"
          :showPage="false"
          show-pagination="false"
        >
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          
          <template v-for="(item, index) in editableKey" :slot="`${item.key}${item.idx}`" slot-scope="text, record, index">
            <span class="requiredFormItem">
              <span v-if="text == null || text == undefined">-</span>
              <BaseTextarea
                v-else
                v-model="record.detailList[item.idx][item.key]"
                :autoSize="{ minRows: 6, maxRows: 6 }"
                :maxLength="3000"
                :disabled="!editable"
                @change="checkInfoChange(record.detailList[item.idx].id, item.key, $event)"
              />
            </span>
            <!-- <span v-else style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                {{text || '-'}}
            </span> -->
          </template>
        </b-table>
      </a-card>
      <div v-if="!isConsultation" class="tool-btns page-btn-right-top" style="position: fixed; bottom: 0px; right: 50px; height: 50px; display: flex; align-items: center; z-index: 2;">
        <a-button v-if="editable" class="ml20" :loading="defLoading" type="primary" @click="handleSubmit(0)"> 保存草稿 </a-button>
        <a-button v-if="editable" class="ml20" :loading="submitLoading" type="primary" @click="handleSubmit(1)"> 提交 </a-button>
        <a-button class="ml20" @click="handleClose"> 关闭 </a-button>
      </div>
    </a-spin>
    <selectApprover :businessId="businessId"  :processConfig="setProcessConfig"></selectApprover>
  </base-breadcrumb>
</template>
<script>
import SelectSubCompany from "@/components/Select/SelectSubCompany"
import SelectProject from "@/components/Select/SelectProject"
import SelectPersonByProject from "@/components/Select/SelectPersonByProject"
import { getProjectsDel } from '@/api/project/projects.js' 
import { updatePlanMonthExamine, getPlanMonthExamineById, addPlanExamineMonthProcess } from '@/api/project/projectPlanningAssessment'
import { finishBusinessTodo } from '@/api/commons.js'
import { formTable, detailColums, testData } from './model.js'
import moment from 'moment'
export default {
  name: "a" + Date.now(),
  components: {
    SelectSubCompany,
    SelectPersonByProject,
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      detailColums,
      // 页面加载
      loading: false,
      isValidate: false,
      // 表单
      form: {
        branchComId: '', // 分公司id
        branchComName: '', // 分公司名称
        examineYearMonth: '',
        examineMonthItemList: []
      },
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, { param: {id: this.$route.query.id} })
        return new Promise((resove, reject) => {
          this.$nextTick(() => {
            resove({
              code: 200,
              data: this.tableData,
            })
          })
        })
        return getPlanMonthExamineById(this.$route.query.id).then((res) => {
          console.log(res)
          return {code: 200, data: res.data.list, ...res.data }
        }).catch((err) => {
          return {
            code: 500,
            err
          }
        })
      },
      // 提交loading
      submitLoading: false,
      defLoading: false,
      
      editableKey: [
        { idx: 0, key: 'problemInfo' },
        { idx: 1, key: 'problemInfo' },
        { idx: 2, key: 'problemInfo' },
        { idx: 3, key: 'problemInfo' },
        { idx: 4, key: 'problemInfo' },
        { idx: 0, key: 'measures' },
        { idx: 1, key: 'measures' },
        { idx: 2, key: 'measures' },
        { idx: 3, key: 'measures' },
        { idx: 4, key: 'measures' },
        { idx: 0, key: 'measuresTime' },
        { idx: 1, key: 'measuresTime' },
        { idx: 2, key: 'measuresTime' },
        { idx: 3, key: 'measuresTime' },
        { idx: 4, key: 'measuresTime' },
        { idx: 0, key: 'effect' },
        { idx: 1, key: 'effect' },
        { idx: 2, key: 'effect' },
        { idx: 3, key: 'effect' },
        { idx: 4, key: 'effect' },
      ],
       //获取流程配置值
        processConfig: null,
        //点击提交发送流程配置值
        setProcessConfig: null,
        businessId: null
    }
  },
 async created() {
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('PLAN_PROCESS_KEY_27')
  },
  computed: {
    tableData() {
      let obj = {
        id: 1,
        projectName: '四川省妇幼保健院（四川省儿童医学中心）天府院区一期工程建设项目'
      }
      return this.form.examineMonthItemList
      return [{obj}]
    },
    cellClass() {
      return (val) => {
        return this.isValidate && this.isEmpty(val) ? 'validate_err' : ''
      }
    },
    currentPost() {
      return this.$currentPost()
    },
    pageType() {
      return this.$route.query.type
    },
    editable() {
      return this.pageType == 'edit'
    },
    // 表单配置
    formOption() {
      const list = [
        {
          label: "分公司",
          keyName: "branchComName",
          disabled: true,
          type: "BaseInput",
        },
        {
          label: "考核月度",
          keyName: "examineMonth",
          type: "BaseInput",
          disabled: true,
        },
      ]
      return list
    },
    // 校验
    rules() {
      const obj = {}
      this.formOption.map((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    },
  },
  mounted() {
    this.initPage();
    // console.log(this.$refs.atable)
    
  },
  methods: {
    windowResize() {
      //手动触发窗口resize事件
      if(document.createEvent) {
          var event = document.createEvent("HTMLEvents");
          event.initEvent("resize", true, true);
          window.dispatchEvent(event);
      } else if(document.createEventObject) {
          window.fireEvent("onresize");
      }
    },
    initPage() {
      this.loading = true
      getPlanMonthExamineById(this.$route.query.id).then((res) => {
        if (res.code == 0) {
          this.form = res.data;
          this.$refs.table.refresh(true)
          // 解决设置fixed后，表格固定列行高计算不精准导致行显示错位问题
          setTimeout(() => {
            this.windowResize()
            this.loading = false
          }, 0);
        } else {
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    isEmpty(val) {
      return val === '' || val === undefined || val === null
    },
    checkInfoChange(id, key, event) {
      // console.log(record, idx, key, event)
      let val = event.target.value
      this.form.examineMonthItemList = this.form.examineMonthItemList.map((item, index) => {
        item.detailList = item.detailList.map((sub, idx) => {
          if (id == sub.id) {
            sub[key] = val
          }
          return sub
        })
        return item
      })
    },
    handleSubmit(state) {
      this.setProcessConfig = null;
      let params = this.$clone(this.form)
      params.isEdit = 1
      // params.state = state
      let btnkey = state == 0 ? 'defLoading' : 'submitLoading'
      this.isValidate = state == 1
      // if (state == 1 && !this.validateTable()) {
      //   return
      // }
      
      this[btnkey] = true
       this.submitApprovalConfirm(state*1 ===1?this.processConfig:6, (flag)=>{
         if(!flag) {
           this[btnkey] = false
           return
         }
        updatePlanMonthExamine(params).then((res) => {
          console.log(res)
          this[btnkey] = false
          if (res.code == 0) {
            if (state == 0) {
              let msg = state == 0 ? '保存成功！' : '提交成功'
              this.$message.success(msg)
              this.handleClose()
            } else {
              return addPlanExamineMonthProcess(params.id)
            }
          }
        }).then((res) => {
          if (res.code == 0) {
            let msg = state == 0 ? '保存成功！' : '提交成功'
            if(state*1===1){
              this.businessId = res.data?.id || params.id;
              this.setProcessConfig = this.processConfig;
            }else{
               this.handleClose()
            }
            this.$message.success(msg)
           
          }
        }).catch(() => {
          this[btnkey] = false
        })
          
      })
    },
    validateTable() {
      
    },
    /**
     * @description: 关闭
     * @param {void}
     * @return {void}
     */
    handleClose() {
      this.$close()
      // this.$multiTab.close(this.$route.fullpath)
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .requiredFormItem .validate_err .ant-input:not([disabled]),
  /deep/ .requiredFormItem .validate_err .ant-time-picker-input,
  /deep/ .requiredFormItem .validate_err .ant-select:not(.ant-select-disabled) .ant-select-selection,
  /deep/ .requiredFormItem .validate_err .ant-calendar-picker-input,
  /deep/ .requiredFormItem .validate_err .ant-input-number-input,
  /deep/ .requiredFormItem .validate_err .ant-radio-inner,
  /deep/ .requiredFormItem .validate_err .ant-cascader-picker {
    border-color: #f5222d;
  }
</style>
